<template>
  <div id="publish">
    <div class="tables">
      <el-table
        height="100%"
        :data="tableData"
        class="table"
        ref="jdjgTable"
        tooltip-effect="light"
        @sort-change="sortChange"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column width="60" align="center" type="index" :index="addIndex" label="序号">
          <el-table-column width="60" align="center" type="index" label="检索"> </el-table-column>
        </el-table-column>
        <el-table-column label="招标编号" align="center">
          <el-table-column min-width="150" align="center" sortable="custom" prop="biddingNo">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="招标内容" align="center">
          <el-table-column min-width="150" align="center" sortable="custom" prop="biddingContent" show-overflow-tooltip>
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
            <template slot-scope="scope">
              <div class="text_hidde">
                <span v-for="(item, index) in scope.row.biddingContent" :key="item.id">
                  {{ item.materialName }}{{ index + 1 === scope.row.biddingContent.length ? '' : ',' }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="工程名称" align="center">
          <el-table-column min-width="150" align="center" sortable="custom" prop="proName">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="预估总计(万元)" align="center">
          <el-table-column min-width="150" align="center" sortable="custom" prop="estimateTotalPrice">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="发布时间" align="center">
          <el-table-column min-width="180" align="center" sortable="custom" prop="createTime">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="截止时间" align="center">
          <el-table-column min-width="180" align="center" sortable="custom" prop="bidDateline">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="入围家数" align="center">
          <el-table-column min-width="150" align="center" sortable="custom" prop="bidNum">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <el-table-column min-width="150" align="center" sortable="custom" prop="stateDescription">
            <template slot="header" align="center" slot-scope="{}">
              <div class="searchBox" @click.stop>
                <el-input v-model.trim="searchPositionName" @change="getDataChange()"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" min-width="150">
          <el-table-column min-width="150" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" class="xg czBtn" @click="checkBidd(scope.row)"> 查看 </el-button>
              <el-button
                size="small"
                type="text"
                class="sc czBtn"
                @click="goTarGet(scope.row)"
                v-if="scope.row.processSon === 5"
              >
                定标
              </el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <div class="pags">
      <element-pagination @getData="getPagChange" :Total="total"></element-pagination>
    </div>
    <element-dialog :Title="'查看已入围标书'" :Visible="visible" :Width="'1200px'" @done="done">
      <check-bidd-dialog :biddFrom="bidd" :biddid="biddId"></check-bidd-dialog>
    </element-dialog>
    <el-dialog
      width="1200px"
      :center="true"
      title="创建定标"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      :visible.sync="createShort"
      v-if="createShort"
    >
      <finalist-calibration :bidid="biddId" :type="'定标'" @close="close"></finalist-calibration>
    </el-dialog>
  </div>
</template>

<script>
import ElementDialog from '../../../../components/ElementDialog.vue'
import ElementPagination from '../../../../components/ElementPagination.vue'
import checkBiddDialog from '../components/checkBiddDialog.vue'
import FinalistCalibration from '../components/finalistCalibration.vue'
export default {
  components: {
    ElementPagination,
    ElementDialog,
    checkBiddDialog,
    FinalistCalibration
  },
  data() {
    return {
      createShort: false,
      bidd: {},
      visible: false,
      tableData: [],
      searchPositionName: '',
      page: 1,
      total: 0,
      size: 15,
      biddId: null
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    close() {
      this.createShort = false
      this.getData()
    },
    // 创建定标
    goTarGet(scope) {
      this.biddId = scope.id
      this.createShort = true
    },
    closeDialog(done) {
      done()
    },
    checkBidd(val) {
      this.biddId = val.id
      this.$https({
        method: 'post',
        url: '/purchaseAdmin/biddingInfoById/?id=' + val.id
      }).then(res => {
        if (res.code === 0) {
          this.bidd = res.data
          this.visible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    done() {
      this.visible = false
    },
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.getData()
    },
    getData() {
      this.$https({
        url: '/bidding/listBiddingStatusQuery',
        method: 'post',
        data: {
          size: this.size,
          page: this.page,
          processState: 2
        }
      })
        .then(res => {
          if (res.code === 0) {
            if (res.data && res.data.length) {
              this.total = res.data[0].total
            }
            this.tableData = res.data || []
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    addIndex(index) {
      return index + 1 + (this.currenteSize - 1) * this.pageSize
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },

    sortChange(e) {
      if (e.prop == 'PositionName') {
        if (e.order == 'descending') {
          this.PositionNameSort = false
        } else if (e.order == 'ascending') {
          this.PositionNameSort = true
        } else {
          this.PositionNameSort = null
        }
      }
      this.getData()
    },
    getDataChange() {
      this.pageSize = 1
      this.getData()
    }
  }
}
</script>
<style lang="less" scoped>
.xg {
  color: #166df1;
}
.sc,
.ty {
  color: #ff3d3d;
}
#publish {
  height: 100%;
}
.tables {
  height: calc(100% - 62px);
}
</style>
